<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:composition template="templatecustomer.xhtml">
        <ui:define name="pagename">
            Register
        </ui:define>
        <ui:define name="content">
            <script type="text/javascript">
                function checkFormRegister (form) {
                var TestVar = form.elements["register:phone"];
                var tax_id = parseFloat(TestVar.value);
                if(isNaN(tax_id)){
                    alert ("You have input Number");
                    TestVar.value = 0;
                    return false;
                }
                return true;
            }
            </script>
            <div class="art-layout-cell layout-item-2" style="width: 33%;">
                <h1 style="text-decoration: underline">REGISTER</h1>
                <br></br>
                <center>
                    <h:form id="register">
                        <table>
                            <tr>
                                <td><b>UserName :</b> </td>
                                <td><h:inputText id="username" required="true" requiredMessage="Input UserName" value="#{registerBean.customer.username}" style="width: 200px" ></h:inputText></td>
                                <td><h:message for="username" style="color: red"></h:message></td>
                            </tr>
                            <tr>
                                <td><b>Password :</b></td>
                                <td><h:inputText id="pass" required="true" requiredMessage="Input Password" value="#{registerBean.customer.password}" style="width: 200px"></h:inputText></td>
                                <td><h:message for="pass" style="color: red"></h:message></td>
                            </tr>
                            <tr>
                                <td><b>Customer Name :</b></td>
                                <td><h:inputText id="name" required="true" requiredMessage="Input Name" value="#{registerBean.customer.customerName}" style="width: 200px"></h:inputText></td>
                                <td><h:message for="name" style="color: red"></h:message></td>
                            </tr>
                            <tr>
                                <td><b>Email :</b></td>
                                <td><h:inputText id="email" required="true" requiredMessage="Input Email" value="#{registerBean.customer.email}" style="width: 200px"></h:inputText></td>
                                <td><h:message for="email" style="color: red"></h:message></td>
                            </tr>
                            <tr>
                                <td><b>Phone Number :</b></td>
                                <td><h:inputText onblur="checkFormRegister(this.form)" id="phone" required="true" requiredMessage="Input UserName" value="#{registerBean.customer.phoneNumber}" style="width: 200px"></h:inputText></td>
                                <td><h:message for="phone" style="color: red"></h:message></td>
                            </tr>
                            <tr>
                                <td><b>Address :</b></td>
                                <td><h:inputText id="address" required="true" requiredMessage="Input Address" value="#{registerBean.customer.address}" style="width: 200px"></h:inputText></td>
                                <td><h:message for="address" style="color: red"></h:message></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><h:commandButton action="#{registerBean.registerAction}" style="background-image: url(images/reg.png);width:80px;height: 34px"></h:commandButton></td>
                            </tr>
                        </table>
                    </h:form>
                </center>
            </div>
        </ui:define>
    </ui:composition>
</html>

